<template>
    <div class="slba-container">
        <div ref="myDiv" class="slba-header">
            <CommonHeader leftIcon :title="typeDetails.text" />

            <van-tabs class="custom-tabs" v-model:active="active" @click-tab="tabSwitch">
                <van-tab v-for="tab in tabs" :title="tab.title" :border="false" :key="tab.name" :name="tab.name">
                    <template #title>
                        {{ tab.title }}
                        <span class="slba-tab-num">
                            {{ tab.num }}</span>
                    </template>
                </van-tab>
            </van-tabs>
        </div>
        <div class="slba-content">
            <div v-for="tab in tabs" :key="tab.name">
                <ShouliBeianListView v-show="active == tab.name" :state="tab.state" :type="type" :active="active"
                    :tabName="tab.name" :divHeight="divHeight" @data-total="total => setTotal(tab, total)" />
            </div>
        </div>
    </div>
</template>

<script setup>
import "@/assets/css/tabs.css"
import { ref, onMounted, watch, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ShouliBeianListView from '@/components/guanli/ShouliBeianListView.vue';
import { BeiAnTypeEnum, getBeiAnType } from '@/bean/BeiAnType';
const router = useRouter();
const route = useRoute();

const type = route.query.itemId;
const typeDetails = getBeiAnType(type);
const back = () => {
    router.back();
}

const tabs = ref([
    { name: 'tab1', title: '待受理', state: "1", num: 0 },
    { name: 'tab2', title: '已受理', state: "2", num: 0 },
    { name: 'tab3', title: '全部', state: "4", num: 0 },
]);
const active = ref('tab1');

const tabSwitch = (item) => {
    // // console.log('eeeeeeeee', item)

    getDivPosition()

    active.value = item.name
}

const setTotal = (tab, total) => {
    tab.num = total
}
onMounted(() => {
    getDivPosition()
    
    // 添加窗口大小调整事件监听器
    window.addEventListener('resize', getDivPosition);
})
const myDiv = ref(null);
const divHeight = ref(0);
const getDivPosition = () => {
  if (myDiv.value) {
    const rect = myDiv.value.getBoundingClientRect();
    divHeight.value = rect.bottom
    // console.log('Top:', rect.top);
    // console.log('Left:', rect.left);
    // console.log('Right:', rect.right);
    // console.log('Bottom:', rect.bottom);
    // console.log('Width:', rect.width);
    // console.log('Height:', rect.height);
  }
};
</script>

<style lang="less" scoped>
.slba-container {
    background: url('@/assets/img/main/all_bg.png') no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.slba-header,
.slba-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
}

.slba-content {
    flex: 1 1 auto;
    overflow: hidden;
    background-color: #F3F9F8;
}


.slba-tabbar {
    background-color: transparent;
    color: #fff;
}

.slba-left-text {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.slba-title-text {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.slba-right-text {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.slba-tab-num {
    background-color: #F38045;
    height: 15px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 400;
    border-radius: 30px;
    color: white;
    vertical-align: top;
}
</style>